<template>
  <div>
    <!-- 原密码没输入提示 -->
    <div id="D5hint">
      <div id="D5hint1">
        <h3>温馨提示</h3>
        <p class="D5hinttwo">原密码不能为空，请重新输入!</p>
        <p id="D5hintthree">关闭</p>
      </div>
    </div>

    <div class="D5page">
      <div class="D5head">
        <a
          ><img src="../assets/img/箭头.png" alt="" width="20px" height="20px"
        /></a>
        <span>注册用户</span>
      </div>
      <!-- 账户重新设置密码 -->
      <div class="D5account">
        <ul>
          <!-- <li>
                <p>姓名</p>
                <p style="font-size: 18px;">6230****9478</p>
            </li> -->
          <li>
            <p>姓名</p>
            <input
              type="text"
              placeholder="请输入你的姓名"
              id="D5code"
              v-model="name"
            />
          </li>
          <li>
            <p>身份证号</p>
            <input
              type="text"
              placeholder="请输入您的身份证号"
              id="D5newCode"
              v-model="idNumber"
            />
          </li>
          <li>
            <p>密码</p>
            <input
              type="password"
              placeholder="请输入密码"
              id="D5newCodeTwo"
              v-model="password1"
            />
          </li>
          <li>
            <p>手机号码</p>
            <p style="font-size: 18px" id="D5phone">{{ phone }}</p>
          </li>
          <li>
            <div class="D5verificationCode">
              <div class="D5a1">
                <p>短信验证码</p>
                <input
                  type="text"
                  placeholder="请输入6位验证码"
                  id="D5six"
                  v-model="code"
                />
              </div>
              <div id="D5gain" @click="gain1" v-if="codeShow">获取验证码</div>
              <span v-if="!codeShow" class="count">{{ count }}秒后重试</span>
            </div>
          </li>
        </ul>
      </div>
      <!-- aaa -->
      <div class="D5tips">
        <p>温馨提示：</p>
        <p>
          支付密码仅支持非连续性数字组合，请不要以常用组合、特殊日期作为密码。
        </p>
      </div>
      <button id="D5confirm" @click="yes">确定</button>
    </div>
  </div>
</template>

<script>
import { reg, regp } from "../api/Register";
import { Dialog } from "vant";
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      name: "",
      idNumber: "",
      password1:"",
      phone: this.$route.params.Number,
      code: "",
      codeShow: true,
      count: "",
      timer: null,

    };
  },
  methods: {
    // 验证码接口
    gain1() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.codeShow = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.codeShow = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
      let code = {
        mobile: this.mobile,
        sms_type: "login",
      };
      reg({ phone: this.phone })
        .then((res) => {})
        .catch((err) => {
          alert("重新获取");
        });
    },
    // 点确定的post请求
    yes() {
      regp({
        name: this.name,
        idNumber: this.idNumber,
        password:this.password1,
        phone: this.phone,
        code: this.code,
      })
        .then((res) => {
          if (res.code == 200) {
            Dialog.alert({
            message: "注册成功",
          }).then(() => {
            this.$router.push({
                name:"Longin"
            })
          });
          }else{
            Dialog({title: '温馨提示', message: res.mag });
          }
        
        })
        .catch((err) => {
            Dialog.alert({
            message: "注册失败",
          }).then(() => {
          });
        });
    },
  },
};
</script>

<style scoped src="../assets/css/registerD.css">
</style>